<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>Dynamical icon/text/style changing</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="title" content="Samples" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
		<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />

	</head>
	<body>
        <div class="header">
            <a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
            <div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
            <div class="search-field">
                <form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
            </div>
            <div class="buttons">
                <a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
                <a class="sample"></a>
            </div>
        </div>
        <div class="content">
            <div class="navigation-div">
                <a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" >All components</a>
                <div class="arrow"></div>
                <a href="../index.html" class="navigation"><img height="22" src="../common/icons/tree.gif" alt="" >dhtmlxTree</a>
                <div class="arrow"></div>
                <a href="./index.html" class="navigation"><img src="../common/icons/none.gif" alt="" >Appearance</a>
            </div>
            <div style="display:block;">
                <h3>Dynamical icon/text/style changing</h3>
            </div>
            <div class="navigation-div">
                <a href="#code" class="navigation view-source"><img src="../common/icons/source.gif" alt="" >View page source</a>
            </div>
            <link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
	<script  src="../../codebase/dhtmlxcommon.js"></script>
	<script  src="../../codebase/dhtmlxtree.js"></script>
	
	
	<p>You can customize this JavaScript tree to look just the way you want. 
	Select a tree item you want to edit then click on image or color to make appropriate changes.  
	To change tree item's text, you should type new text in the box and click "Set new item label".</p>
		
	<script>
		function setColor(color1,color2)
		{
			tree.setItemColor(tree.getSelectedItemId(),color1,color2);
		}
	</script>
	<table>
		<tr>
			<td valign="top">
				<div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;"></div>
			</td>
			<td rowspan="2" style="padding-left:25" valign="top">
			
			
			<a href="javascript:void(0);" onClick="var d=new Date(); tree.setItemText(tree.getSelectedItemId(),document.getElementById('ed1').value);">Set new item label</a>&nbsp;<input type="text" value="New label" id="ed1"><br><br>
			
			To change item's image - click on one of next images: 
			<table>
				<tr><td>
					<a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'tombs.gif','tombs.gif','tombs.gif');"><img src="../../codebase/imgs/csh_yellowbooks/tombs.gif" border="0"></a></td>
					<td><a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'tombs_open.gif','tombs_open.gif','tombs_open.gif');"><img src="../../codebase/imgs/csh_yellowbooks/tombs_open.gif" border="0"></a></td>
					<td><a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'leaf.gif','leaf.gif','leaf.gif');"><img src="../../codebase/imgs/csh_yellowbooks/leaf.gif" border="0"></a></td>
					<td><a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'leaf2.gif','leaf2.gif','leaf2.gif');"><img src="../../codebase/imgs/csh_yellowbooks/leaf2.gif" border="0"></a></td>
					
				</td></tr>
				<tr><td nowrap>
					<a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'iconText.gif','iconText.gif','iconText.gif');"><img src="../../codebase/imgs/csh_yellowbooks/iconText.gif" border="0"></a></td>
					<td><a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'folderOpen.gif','folderOpen.gif','folderOpen.gif');"><img src="../../codebase/imgs/csh_yellowbooks/folderOpen.gif" border="0"></a></td>
					<td><a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'folderClosed.gif','folderClosed.gif','folderClosed.gif');"><img src="../../codebase/imgs/csh_yellowbooks/folderClosed.gif" border="0"></a></td>
					<td><a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'leaf3.gif','leaf3.gif','leaf3.gif');"><img src="../../codebase/imgs/csh_yellowbooks/leaf3.gif" border="0"></a></td>
				</td></tr>				
			</table>
			<br>
			To change item's color - click on one of next colors: 
			<table>
				<tr>
					<td><div style="cursor:pointer; width:20px; height:20px; background-color:#ff0000;" onClick="setColor('#ff0000','#ff0000')">&nbsp;</div></td>
					<td><div style="cursor:pointer;width:20px; height:20px; background-color:#ffa500;" onClick="setColor('#ffa500','#ffa500')">&nbsp;</div></td>
					<td><div style="cursor:pointer;width:20px; height:20px; background-color:#ffff00;" onClick="setColor('#ffff00','#ffff00')">&nbsp;</div></td>				
				</tr>			
				<tr> 
					<td><div style="cursor:pointer;width:20px; height:20px; background-color:#008000;" onClick="setColor('#008000','#adff2f')">&nbsp;</div></td>
					<td><div style="cursor:pointer; width:20px; height:20px; background-color:#00ff7f;" onClick="setColor('#00ff7f','#adff2f')">&nbsp;</div></td>
					<td><div style="cursor:pointer; width:20px; height:20px; background-color:#adff2f;" onClick="setColor('#adff2f')">&nbsp;</div></td>				
				</tr>
				<tr>
					<td><div style="cursor:pointer; width:20px; height:20px; background-color:#0000ff;" onClick="setColor('#0000ff','#87ceeb')">&nbsp;</div></td>
					<td><div style="cursor:pointer; width:20px; height:20px; background-color:#9932cc;" onClick="setColor('#9932cc','#9932cc')">&nbsp;</div></td>
					<td><div style="cursor:pointer; width:20px; height:20px; background-color:#87ceeb;" onClick="setColor('#87ceeb','#87ceeb')">&nbsp;</div></td>				
				</tr>
			</table>
			</td>
		</tr>
		
	</table>
	

	<script>
			tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);

			tree.setSkin('dhx_skyblue');
			tree.setImagePath("../../codebase/imgs/csh_yellowbooks/");
			tree.loadXML("../common/tree.xml");

	</script>
			
			
         </div>
    <div class="source">
        <div class="teg">Source</div>
        <div class="code" id="code">
		<div class="hl-main"><pre><span class="hl-brackets">&lt;</span><span class="hl-reserved">link</span><span class="hl-code"> </span><span class="hl-var">rel</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">STYLESHEET</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">text/css</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">../../codebase/dhtmlxtree.css</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">script</span><span class="hl-code">  </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">../../codebase/dhtmlxcommon.js</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">script</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">script</span><span class="hl-code">  </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">../../codebase/dhtmlxtree.js</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">script</span><span class="hl-brackets">&gt;</span><span class="hl-code">
 
    
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">script</span><span class="hl-brackets">&gt;</span><span class="hl-code"><div class="hl-main"><pre><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">setColor</span><span class="hl-brackets">(</span><span class="hl-identifier">color1</span><span class="hl-code">, </span><span class="hl-identifier">color2</span><span class="hl-brackets">)</span><span class="hl-code">; </span><span class="hl-brackets">{</span><span class="hl-code">
    </span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setItemColor</span><span class="hl-brackets">(</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">getSelectedItemId</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">, </span><span class="hl-identifier">color1</span><span class="hl-code">, </span><span class="hl-identifier">color2</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-brackets">}</span></pre></div></span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">script</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">table</span><span class="hl-brackets">&gt;</span><span class="hl-code">
    </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
        </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">top</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-code">
            </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">div</span><span class="hl-brackets">&gt;</span><span class="hl-code">
        </span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
        </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">rowspan</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">2</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">padding-left:25</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">top</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-code">
        
        </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">var d=new Date(); tree.setItemText(tree.getSelectedItemId(),document.getElementById('ed1').value);</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-code">Set new item label</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">a</span><span class="hl-brackets">&gt;</span><span class="hl-special">&amp;nbsp;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">input</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">text</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">value</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">New label</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">ed1</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">br</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">br</span><span class="hl-brackets">&gt;</span><span class="hl-code">
        To change item's image - click on one of next images: 
        </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">table</span><span class="hl-brackets">&gt;</span><span class="hl-code">
            </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
                </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">tree.setItemImage2(tree.getSelectedItemId(),'tombs.gif','tombs.gif','tombs.gif');</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">img</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/tombs.gif</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">0</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">a</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
                </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">tree.setItemImage2(tree.getSelectedItemId(),'tombs_open.gif','tombs_open.gif','tombs_open.gif');</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">img</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/tombs_open.gif</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">0</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">a</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
                </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">tree.setItemImage2(tree.getSelectedItemId(),'leaf.gif','leaf.gif','leaf.gif');</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">img</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/leaf.gif</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">0</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">a</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
                </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">tree.setItemImage2(tree.getSelectedItemId(),'leaf2.gif','leaf2.gif','leaf2.gif');</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">img</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/leaf2.gif</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">0</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">a</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
            </span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
            </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">nowrap</span><span class="hl-brackets">&gt;</span><span class="hl-code">
                </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">tree.setItemImage2(tree.getSelectedItemId(),'iconText.gif','iconText.gif','iconText.gif');</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">img</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/iconText.gif</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">0</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">a</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
                </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">tree.setItemImage2(tree.getSelectedItemId(),'folderOpen.gif','folderOpen.gif','folderOpen.gif');</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">img</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/folderOpen.gif</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">0</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">a</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
                </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">tree.setItemImage2(tree.getSelectedItemId(),'folderClosed.gif','folderClosed.gif','folderClosed.gif');</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">img</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/folderClosed.gif</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">0</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">a</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
                </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">tree.setItemImage2(tree.getSelectedItemId(),'leaf3.gif','leaf3.gif','leaf3.gif');</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">img</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/leaf3.gif</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">0</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">a</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
            </span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">                
        </span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">table</span><span class="hl-brackets">&gt;</span><span class="hl-code">
        </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">br</span><span class="hl-brackets">&gt;</span><span class="hl-code">
        To change item's color - click on one of next colors: 
        </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">table</span><span class="hl-brackets">&gt;</span><span class="hl-code">
            </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
                </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">cursor:pointer; width:20px; height:20px; background-color:#ff0000;</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">setColor('#ff0000','#ff0000')</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-special">&amp;nbsp;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">div</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
                </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">cursor:pointer;width:20px; height:20px; background-color:#ffa500;</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">setColor('#ffa500','#ffa500')</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-special">&amp;nbsp;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">div</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
                </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">cursor:pointer;width:20px; height:20px; background-color:#ffff00;</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">setColor('#ffff00','#ffff00')</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-special">&amp;nbsp;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">div</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">                
            </span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">            
            </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code"> 
                </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">cursor:pointer;width:20px; height:20px; background-color:#008000;</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">setColor('#008000','#adff2f')</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-special">&amp;nbsp;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">div</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
                </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">cursor:pointer; width:20px; height:20px; background-color:#00ff7f;</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">setColor('#00ff7f','#adff2f')</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-special">&amp;nbsp;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">div</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
                </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">cursor:pointer; width:20px; height:20px; background-color:#adff2f;</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">setColor('#adff2f')</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-special">&amp;nbsp;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">div</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">                
            </span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
            </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
                </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">cursor:pointer; width:20px; height:20px; background-color:#0000ff;</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">setColor('#0000ff','#87ceeb')</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-special">&amp;nbsp;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">div</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
                </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">cursor:pointer; width:20px; height:20px; background-color:#9932cc;</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">setColor('#9932cc','#9932cc')</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-special">&amp;nbsp;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">div</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
                </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">cursor:pointer; width:20px; height:20px; background-color:#87ceeb;</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">setColor('#87ceeb','#87ceeb')</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-special">&amp;nbsp;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">div</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">                
            </span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
        </span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">table</span><span class="hl-brackets">&gt;</span><span class="hl-code">
        </span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
    </span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">table</span><span class="hl-brackets">&gt;</span><span class="hl-code">
 
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">script</span><span class="hl-brackets">&gt;</span><span class="hl-code"><div class="hl-main"><pre><span class="hl-identifier">tree</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">dhtmlXTreeObject</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">&quot;</span><span class="hl-code">, </span><span class="hl-quotes">&quot;</span><span class="hl-string">100%</span><span class="hl-quotes">&quot;</span><span class="hl-code">, </span><span class="hl-quotes">&quot;</span><span class="hl-string">100%</span><span class="hl-quotes">&quot;</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setSkin</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">dhx_skyblue</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImagePath</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">loadXML</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">../common/tree.xml</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;</span></pre></div></span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">script</span><span class="hl-brackets">&gt;</span></pre></div>
        </div>
    <div class="footer">
        <div class="footer-logo"></div>
        <div class="copyright">Copyright &copy; 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
    </div>
	</body>
</html>